/** 图元编辑
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */

/* ================================================================================================ */
// 🍀引入★
/* ================================================================================================ */
import * as d3 from "d3"
import { useMessage } from 'naive-ui';
/**🐸 图元端函数引入*/
import {
  onGetLineMiddle,
  onUpdataHtml,
  onShowSelected,   // 选中显示
} from '@/functions'

import { useEditorStore } from "../../store"; // 引入存储
const myStore = useEditorStore(); // 使用存储
const message = useMessage();//消息
/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 根据选择区域获取图元键
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 迭代-根据选择区域获取图元键
 * @参数_SvgData 图元数据
 */
export const onIterationGetKeyBySelectRange = (SvgData: any): any => {
  // console.log("迭代-根据选择区域获取图元键")
  let Range = myStore.selectRange// 转储选择区域
  /** 选择区域 */
  let selectRange = {
    x1: Range[0].x,
    y1: Range[0].y,
    x2: Range[1].x,
    y2: Range[1].y,
  }
  SvgData.forEach((element: any) => {
    let TempKey = element.key
    // console.log(element.place)
    /** 目标区域 */
    const TargetRange = {
      // 左上角
      x1: element.place.tl.x,
      y1: element.place.tl.y,
      // 右下角
      x2: element.place.br.x,
      y2: element.place.br.y
    }
    if (
      TargetRange.x1 - selectRange.x1 >= 0 &&
      TargetRange.y1 - selectRange.y1 >= 0 &&
      TargetRange.x2 - selectRange.x2 <= 0 &&
      TargetRange.y2 - selectRange.y2 <= 0
    ) {

      myStore.selectKeys.push(TempKey)
      myStore.selectedPel = element// 添加-选择图元数据
    }
    try {
      if (element.children.length > 0) {
        onIterationGetKeyBySelectRange(element.children)//迭代-根据选择区域获取图元键
      }
    } catch (error) {

    }
  })
}

/** 根据选择区域获取图元键
 * @参数_range 区域
 */
export const onGetKeyBySelectRange = (): any => {
  // console.log("根据选择区域获取图元键")
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 建立参数
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  let Range = myStore.selectRange// 转储选择区域
  /** 选择区域 */
  let selectRange = {
    x1: Range[0].x,
    y1: Range[0].y,
    x2: Range[1].x,
    y2: Range[1].y,
  }
  /** 点选状态 */
  let PointSecect = false

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 判断点选状态
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if ((Range[0].x === Range[1].x) && (Range[0].y === Range[1].y)) {
    // console.log("点选")
    PointSecect = true
    myStore.selectToggle = !myStore.selectToggle//触发-选择切换
  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 对比位置选择图元
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if ((Range.length === 2) && (!PointSecect)) {
    // console.log(Range.length)
    // console.log("★ --------------- 遍历 图元数据")
    /** 深度拷贝-图元数据  */
    let CopypelSet = JSON.parse(JSON.stringify(myStore.pelSet))
    CopypelSet.forEach((dataSet: any) => {
      let TempKey = dataSet.key
      // console.log(element.place)
      /** 目标区域 */
      const TargetRange = {
        // 左上角
        x1: dataSet.place.tl.x,
        y1: dataSet.place.tl.y,
        // 右下角
        x2: dataSet.place.br.x,
        y2: dataSet.place.br.y
      }
      if (
        TargetRange.x1 - selectRange.x1 >= 0 &&
        TargetRange.y1 - selectRange.y1 >= 0 &&
        TargetRange.x2 - selectRange.x2 <= 0 &&
        TargetRange.y2 - selectRange.y2 <= 0
      ) {
        myStore.selectKeys.push(TempKey)
        myStore.selectedPel = dataSet// 添加-选择图元数据
      }
      try {
        if (dataSet.children.length > 0) {
          onIterationGetKeyBySelectRange(dataSet.children)//迭代-根据选择区域获取图元键
        }
      } catch (error) {

      }
    })
    myStore.selectRange=[];
    myStore.selectToggle = !myStore.selectToggle // 触发-选择切换
  }
  setTimeout(() => {
    // 🐸 ★--------------------------------------------------------------------| 清理数据
    myStore.setMenu("PelEditSelect", 0) /** 菜单-编辑-图元-选择 */
    myStore.selectRect.RectWidth = 0  //清理-矩形宽度
    myStore.selectRect.RectHeight = 0 //清理-矩形高度
    myStore.selectRect.BasePointX = 0 //清理-矩形基点X
    myStore.selectRect.BasePointY = 0 //清理-矩形基点Y
    myStore.workState = 0;// 清理-工作状态_无
    myStore.tips = "" // 提示
    myStore.recordPoint = [] // 清理记录点
  }, 100)


}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 根据键获取图元
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 迭代根据键获取图元
 * @参数_Attribute  图元
 * @参数_Key      键
 */
export const onGetPelIterationBayKey = (dataSet: any, Key: string): any => {
  // console.log("✍ 图元编辑-获取图元")
  dataSet.forEach((element: any) => {
    if (element.key === Key) {
      myStore.selectedPel = element// 添加-选择图元数据
    }
  })
}

/** 根据键获取图元
 * @参数_Attribute  图元
 * @参数_Key      键
 */
export const onGetPelBayKey = (Key: string) => {
  // console.log("✍ 图元编辑-获取图元")
  /** 复制图元数据*/
  let dataSet = myStore.pelSet
  // console.log(dataSet)
  // console.log(Key)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历视图数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  dataSet.forEach((element: any) => {
    if (element.key === Key) {
      myStore.selectedPel = element// 添加-选择图元数据
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 迭代
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    try {
      if (dataSet.children.length > 0) {
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 遍历视图数据
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        dataSet.children.forEach((ChildrenItem: any) => {
          onGetPelIterationBayKey(ChildrenItem, Key,)//迭代根据键获取图元
        })
      }
    } catch (error) {
      // console.log(error)
    }
  })
}


/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 设置-图元属性
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 迭代设置-图元属性
 * @参数_SubAttribute  属性
 * @参数_Id         id
 * @参数_Key        图标键
 * @参数_NewVal     新变量
 */
const onSetPelAttrIteration = (
  SubAttribute: any,
  id: string,
  Key: string | number | boolean,
  newVal: any
) => {
  // console.log("✍ 图元编辑-设置图元子属性")
  for (let index = 0; index < SubAttribute.length; index++) {
    const element = SubAttribute[index]
    if (element.key === Key) {
      // console.log(`${Key}-设置图元属性`)
      element.val = newVal
    }
    /** 子 */
    try {
      let Children = element.children
      if (Children.length > 0) {
        onSetPelAttrIteration(Children, id, Key, newVal)
      }
    } catch (error) {
      // console.log(error)
    }
  }
}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 复制图元
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 迭代-复制图元
 * @参数_SvgData 视图数据
 * @参数_Key      查找id
 * @参数_OffSetX  偏移量X
 * @参数_OffSetY  偏移量Y
 */
const onIterationPelCopy = (
  pelSet: any,
  Key: string,
  OffSetX: number,
  OffSetY: number
) => {
  // console.log("图元编辑-迭代-复制图元")
  /** ★ ★ 遍历-视图数据 */
  for (let index = 0; index < pelSet.length; index++) {
    const Copyitem = pelSet[index]//复制项
    if (Copyitem.key === Key) {
      /** ★ ★ 获取图元类型 */
      let PelType = Copyitem.type
      // console.log(`图元类型=${PelType}`)
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // ◆ ◆ 复制图元参数
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      if (PelType === "horizontaLine"/*水平线*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "horizontaLineCont",
          Number(myStore.getElementCont("horizontaLineCont")) + 1
        );
        /** 图元id */
        let pelId = 'horizontaLine' + myStore.getUUID();
        /** 图元名称*/
        let pelName = "水平线_" + cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
        let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
        let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
        let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
        pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
        pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
        pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
        pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
        myStore.pelSet.push(pelInfo);  //添加-图元数据
      }
      if (PelType === "verticalLine"/*垂直线*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "verticalLineCont",
          Number(myStore.getElementCont("verticalLineCont")) + 1
        );
        /** 图元id */
        let pelId = 'verticalLine' + myStore.getUUID();
        /** 图元名称*/
        let pelName = "垂直线_" + cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
        let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
        let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
        let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
        pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
        pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
        pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
        pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
        myStore.pelSet.push(pelInfo); //添加-图元数据
      }
      if (PelType === "slantLine"/*斜线*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "slantLineCont",
          Number(myStore.getElementCont("slantLineCont")) + 1
        );
        /** 图元id */
        let pelId = 'slantLine' + myStore.getUUID();
        /** 图元名称*/
        let pelName = "斜线_" + cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
        let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
        let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
        let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
        pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
        pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
        pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
        pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
        myStore.pelSet.push(pelInfo); //添加-图元数据
      }
      if (PelType === "circle"/*圆*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "CircleCont",
          Number(myStore.getElementCont("CircleCont")) + 1
        )
        /** 图元id */
        let pelId = 'Pel' + myStore.getUUID()
        /** 图元名称*/
        let pelName = "圆_" + cont
        /** 图元参数 */
        let pelInfo = Copyitem
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let cx = Number(pelInfo.attrs.cx.val);// 圆心坐标CX 
        let cy = Number(pelInfo.attrs.cy.val);// 圆心坐标CY 
        pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
        pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
        myStore.pelSet.push(pelInfo);  //添加-图元数据
      }
      if (PelType === "ellipse"/*椭圆*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "ellipseCont",
          Number(myStore.getElementCont("ellipseCont")) + 1
        )
        /** 图元id */
        let pelId = 'Pel' + myStore.getUUID()
        /** 图元名称*/
        let pelName = "椭圆_" + cont
        /** 图元参数 */
        let pelInfo = Copyitem
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let cx = Number(pelInfo.attrs.cx.val); // 圆心坐标CX 
        let cy = Number(pelInfo.attrs.cy.val); // 圆心坐标CY 
        pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
        pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
        myStore.pelSet.push(pelInfo);  //添加-图元数据
      }
      if (PelType === "arc"/*三点弧线*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "arcCont",
          Number(myStore.getElementCont("arcCont")) + 1
        )
        /** 图元id */
        let pelId = 'arc' + myStore.getUUID()
        /** 图元名称*/
        let pelName = "三点弧线_" + cont
        /** 图元参数 */
        let pelInfo = Copyitem
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let startX = Number(pelInfo.attrs.startX.val) // 起点坐标X
        let startY = Number(pelInfo.attrs.startY.val) // 起点坐标Y
        let endX = Number(pelInfo.attrs.endX.val) // 终点坐标X
        let endY = Number(pelInfo.attrs.endY.val) // 终点坐标Y
        let ctrlX = Number(pelInfo.attrs.ctrlX.val) // 控制点坐标X
        let ctrlY = Number(pelInfo.attrs.ctrlY.val) // 控制点坐标Y
        pelInfo.attrs.startX.val = startX + OffSetX;// 设置图元参数_起点坐标X
        pelInfo.attrs.startY.val = startY + OffSetY;// 设置图元参数_起点坐标Y
        pelInfo.attrs.endX.val = endX + OffSetX;    // 设置图元参数_终点坐标X
        pelInfo.attrs.endY.val = endY + OffSetY;    // 设置图元参数_终点坐标Y
        pelInfo.attrs.ctrlX.val = ctrlX + OffSetX;  // 设置图元参数_控制点坐标X
        pelInfo.attrs.ctrlY.val = ctrlY + OffSetY;  // 设置图元参数_控制点坐标Y
        myStore.pelSet.push(pelInfo)  //添加-图元数据
      }
      if (PelType === "circlePolygon" /*圆分多边形*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "circlePolygonCont",
          Number(myStore.getElementCont("circlePolygonCont")) + 1
        );
        /** 图元id */
        let pelId = "circlePolygon" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "圆分多边形_" + cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let cx = Number(pelInfo.attrs.cx.val); // 圆心坐标CX
        let cy = Number(pelInfo.attrs.cy.val); // 圆心坐标CY
        pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX
        pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY
        myStore.pelSet.push(pelInfo);          // 添加_图元数据
      }
      if (PelType === "rectangle" /*矩形*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "rectangleCont",
          Number(myStore.getElementCont("rectangleCont")) + 1
        ); // 计数
        /** 图元id */
        let pelId = "rectangle" + myStore.getUUID();
        /** 图元名称 */
        let pelName = "矩形_" + cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
        myStore.pelSet.push(pelInfo);              // 添加_图元数据
      }
      if (PelType === "polygon" /*多边形*/) {
        /** 计数 */
        let cont = myStore.setElementCont(
          "polygonCont",
          Number(myStore.getElementCont("polygonCont")) + 1
        ); // 计数
        let pelId = "polygon" + myStore.getUUID(); // 图元id
        let pelName = "多边形_" + cont; // 图元名称
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        /** 转储-路径点*/
        let pathPoints = pelInfo.attrs.pathPoints.val
        /** 遍历更改-路径点参数*/
        pathPoints.forEach((item: any) => {
          item.x = item.x + OffSetX;
          item.y = item.y + OffSetY;
        });
        /** 设置图元参数_路径点*/
        pelInfo.attrs.pathPoints.val = pathPoints;
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "polyline" /*折线*/) {
        let cont = myStore.setElementCont(
          "polylineCont",
          Number(myStore.getElementCont("polylineCont")) + 1
        ); // 计数
        let pelId = "polyline" + myStore.getUUID(); // 图元id
        let pelName = "折线_" + cont; // 图元名称
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        /** 转储-路径点*/
        let pathPoints = pelInfo.attrs.pathPoints.val
        /** 遍历更改-路径点参数*/
        pathPoints.forEach((item: any) => {
          item.x = item.x + OffSetX;
          item.y = item.y + OffSetY;
        });
        /** 设置图元参数_路径点*/
        pelInfo.attrs.pathPoints.val = pathPoints;
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "path" /*路径*/) {
        /** 计数 */
        let Cont = myStore.setElementCont("pathCont", Number(myStore.getElementCont("pathCont")) + 1);
        let pelId = "polyline" + myStore.getUUID(); // 图元id
        let pelName = "折路径_" + Cont; // 图元名称
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        /** 转储-路径点*/
        let pathPoints = pelInfo.attrs.pathPoints.val
        /** 遍历更改-路径点参数*/
        pathPoints.forEach((item: any) => {
          item.x = item.x + OffSetX;
          item.y = item.y + OffSetY;
        });
        /** 设置图元参数_路径点*/
        pelInfo.attrs.pathPoints.val = pathPoints;
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "svgText" /*Svg文本*/) {
        /** 计数 */
        let Cont = myStore.setElementCont(
          "svgTextCont",
          Number(myStore.getElementCont("svgTextCont")) + 1
        );
        /** 图元id */
        let pelId = "svgText" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "Svg文本_" + Cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "wrap" /*包*/) {
        /** 计数 */
        let Cont = myStore.setElementCont(
          "GroupCont",
          Number(myStore.getElementCont("GroupCont")) + 1
        );
        /** 图元id */
        let pelId = "Group" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "图元包_" + Cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "divBlock" /*DIV块*/) {
        /** 计数 */
        let Cont = myStore.setElementCont(
          "divBlockCont",
          Number(myStore.getElementCont("divBlockCont")) + 1
        );
        /** 图元id */
        let pelId = "divBlock" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "DIV块_" + Cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "divText" /*DIV文本*/) {
        /** 计数 */
        let Cont = myStore.setElementCont(
          "divTextCont",
          Number(myStore.getElementCont("divTextCont")) + 1
        );
        /** 图元id */
        let pelId = "divText" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "DIV文本_" + Cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        pelInfo.parent = "none";
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
      if (PelType === "svgImage" /*svg图片*/) {
        /** 计数 */
        let Cont = myStore.setElementCont(
          "svgImageCont",
          Number(myStore.getElementCont("svgImageCont")) + 1
        );
        /** 图元id */
        let pelId = "svgImage" + myStore.getUUID();
        /** 图元名称*/
        let pelName = "svg图片_" + Cont;
        /** 图元参数 */
        let pelInfo = Copyitem;
        /** 设置图元参数_图元名称 */
        pelInfo.label = pelName;
        /** 设置图元参数_图元id */
        pelInfo.key = pelId;
        /** 设置图元参数_图元父id */
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
        pelInfo.parent = "none";
        /** 添加_图元数据 */
        myStore.pelSet.push(pelInfo);
      }
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 迭代-移动图元
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    try {
      /** 判断子数据 */
      let Children = Copyitem.children
      /** 迭代-复制图元 */
      if (Children.length > 0) {
        onIterationPelCopy(Children, Key, OffSetX, OffSetY) // 迭代-复制图元
      }
    } catch (error) {

    }

  }
}

/** 复制图元 */
export const onPelCopy = () => {
  // console.log("图元编辑-复制图元")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  /** ★ 深度拷贝-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** ★ 计算偏移量 */
  let OffSetX = 0
  let OffSetY = 0
  OffSetX = myStore.recordPoint[1].x - myStore.recordPoint[0].x
  OffSetY = myStore.recordPoint[1].y - myStore.recordPoint[0].y
  // console.log(`OffSetX=${OffSetX};OffSetY=${OffSetY};`)

  /** ★ 判断-选择集长度 */
  if (selectKeys.length > 0) {
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 ★ 遍历-选择集
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    for (let index = 0; index < selectKeys.length; index++) {
      const Key = selectKeys[index]
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 ★ 遍历-视图数据
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const Copyitem = pelSet[indexB]

        if (Copyitem.key === Key) {
          /** ★ ★ 获取图元类型 */
          let PelType = Copyitem.type
          // console.log(`图元类型=${PelType}`)
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // ◆ ◆ 复制图元参数
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          if (PelType === "horizontaLine"/*水平线*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "horizontaLineCont",
              Number(myStore.getElementCont("horizontaLineCont")) + 1
            );
            /** 图元id */
            let pelId = 'horizontaLine' + myStore.getUUID();
            /** 图元名称*/
            let pelName = "水平线_" + cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
            let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
            let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
            let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
            pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
            pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
            pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
            pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
            myStore.pelSet.push(pelInfo);  //添加-图元数据
          }
          if (PelType === "verticalLine"/*垂直线*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "verticalLineCont",
              Number(myStore.getElementCont("verticalLineCont")) + 1
            );
            /** 图元id */
            let pelId = 'verticalLine' + myStore.getUUID();
            /** 图元名称*/
            let pelName = "垂直线_" + cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
            let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
            let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
            let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
            pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
            pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
            pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
            pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
            myStore.pelSet.push(pelInfo); //添加-图元数据
          }
          if (PelType === "slantLine"/*斜线*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "slantLineCont",
              Number(myStore.getElementCont("slantLineCont")) + 1
            );
            /** 图元id */
            let pelId = 'slantLine' + myStore.getUUID();
            /** 图元名称*/
            let pelName = "斜线_" + cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let x1 = Number(pelInfo.attrs.x1.val);// X1坐标
            let x2 = Number(pelInfo.attrs.x2.val);// Y1坐标
            let y1 = Number(pelInfo.attrs.y1.val);// Y1坐标
            let y2 = Number(pelInfo.attrs.y2.val);// Y1坐标
            pelInfo.attrs.x1.val = x1 + OffSetX; // 设置图元参数_X1坐标
            pelInfo.attrs.x2.val = x2 + OffSetX; // 设置图元参数_Y1坐标
            pelInfo.attrs.y1.val = y1 + OffSetY; // 设置图元参数_Y1坐标
            pelInfo.attrs.y2.val = y2 + OffSetY; // 设置图元参数_Y1坐标
            myStore.pelSet.push(pelInfo); //添加-图元数据
          }
          if (PelType === "circle"/*圆*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "CircleCont",
              Number(myStore.getElementCont("CircleCont")) + 1
            )
            /** 图元id */
            let pelId = 'Pel' + myStore.getUUID()
            /** 图元名称*/
            let pelName = "圆_" + cont
            /** 图元参数 */
            let pelInfo = Copyitem
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let cx = Number(pelInfo.attrs.cx.val);// 圆心坐标CX 
            let cy = Number(pelInfo.attrs.cy.val);// 圆心坐标CY 
            pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
            pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
            myStore.pelSet.push(pelInfo);  //添加-图元数据
          }
          if (PelType === "ellipse"/*椭圆*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "ellipseCont",
              Number(myStore.getElementCont("ellipseCont")) + 1
            )
            /** 图元id */
            let pelId = 'Pel' + myStore.getUUID()
            /** 图元名称*/
            let pelName = "椭圆_" + cont
            /** 图元参数 */
            let pelInfo = Copyitem
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let cx = Number(pelInfo.attrs.cx.val); // 圆心坐标CX 
            let cy = Number(pelInfo.attrs.cy.val); // 圆心坐标CY 
            pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
            pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
            myStore.pelSet.push(pelInfo);  //添加-图元数据
          }
          if (PelType === "arc"/*三点弧线*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "arcCont",
              Number(myStore.getElementCont("arcCont")) + 1
            )
            /** 图元id */
            let pelId = 'arc' + myStore.getUUID()
            /** 图元名称*/
            let pelName = "三点弧线_" + cont
            /** 图元参数 */
            let pelInfo = Copyitem
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let startX = Number(pelInfo.attrs.startX.val) // 起点坐标X
            let startY = Number(pelInfo.attrs.startY.val) // 起点坐标Y
            let endX = Number(pelInfo.attrs.endX.val) // 终点坐标X
            let endY = Number(pelInfo.attrs.endY.val) // 终点坐标Y
            let ctrlX = Number(pelInfo.attrs.ctrlX.val) // 控制点坐标X
            let ctrlY = Number(pelInfo.attrs.ctrlY.val) // 控制点坐标Y
            pelInfo.attrs.startX.val = startX + OffSetX;// 设置图元参数_起点坐标X
            pelInfo.attrs.startY.val = startY + OffSetY;// 设置图元参数_起点坐标Y
            pelInfo.attrs.endX.val = endX + OffSetX;    // 设置图元参数_终点坐标X
            pelInfo.attrs.endY.val = endY + OffSetY;    // 设置图元参数_终点坐标Y
            pelInfo.attrs.ctrlX.val = ctrlX + OffSetX;  // 设置图元参数_控制点坐标X
            pelInfo.attrs.ctrlY.val = ctrlY + OffSetY;  // 设置图元参数_控制点坐标Y
            myStore.pelSet.push(pelInfo)  //添加-图元数据
          }
          if (PelType === "circlePolygon" /*圆分多边形*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "circlePolygonCont",
              Number(myStore.getElementCont("circlePolygonCont")) + 1
            );
            /** 图元id */
            let pelId = "circlePolygon" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "圆分多边形_" + cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let cx = Number(pelInfo.attrs.cx.val); // 圆心坐标CX
            let cy = Number(pelInfo.attrs.cy.val); // 圆心坐标CY
            pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX
            pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY
            myStore.pelSet.push(pelInfo);          // 添加_图元数据
          }
          if (PelType === "rectangle" /*矩形*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "rectangleCont",
              Number(myStore.getElementCont("rectangleCont")) + 1
            ); // 计数
            /** 图元id */
            let pelId = "rectangle" + myStore.getUUID();
            /** 图元名称 */
            let pelName = "矩形_" + cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
            myStore.pelSet.push(pelInfo);              // 添加_图元数据
          }
          if (PelType === "polygon" /*多边形*/) {
            /** 计数 */
            let cont = myStore.setElementCont(
              "polygonCont",
              Number(myStore.getElementCont("polygonCont")) + 1
            ); // 计数
            let pelId = "polygon" + myStore.getUUID(); // 图元id
            let pelName = "多边形_" + cont; // 图元名称
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            /** 转储-路径点*/
            let pathPoints = pelInfo.attrs.pathPoints.val
            /** 遍历更改-路径点参数*/
            pathPoints.forEach((item: any) => {
              item.x = item.x + OffSetX;
              item.y = item.y + OffSetY;
            });
            /** 设置图元参数_路径点*/
            pelInfo.attrs.pathPoints.val = pathPoints;
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "polyline" /*折线*/) {
            let cont = myStore.setElementCont(
              "polylineCont",
              Number(myStore.getElementCont("polylineCont")) + 1
            ); // 计数
            let pelId = "polyline" + myStore.getUUID(); // 图元id
            let pelName = "折线_" + cont; // 图元名称
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            /** 转储-路径点*/
            let pathPoints = pelInfo.attrs.pathPoints.val
            /** 遍历更改-路径点参数*/
            pathPoints.forEach((item: any) => {
              item.x = item.x + OffSetX;
              item.y = item.y + OffSetY;
            });
            /** 设置图元参数_路径点*/
            pelInfo.attrs.pathPoints.val = pathPoints;
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "path" /*路径*/) {
            /** 计数 */
            let Cont = myStore.setElementCont("pathCont", Number(myStore.getElementCont("pathCont")) + 1);
            let pelId = "polyline" + myStore.getUUID(); // 图元id
            let pelName = "折路径_" + Cont; // 图元名称
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            /** 转储-路径点*/
            let pathPoints = pelInfo.attrs.pathPoints.val
            /** 遍历更改-路径点参数*/
            pathPoints.forEach((item: any) => {
              item.x = item.x + OffSetX;
              item.y = item.y + OffSetY;
            });
            /** 设置图元参数_路径点*/
            pelInfo.attrs.pathPoints.val = pathPoints;
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "svgText" /*Svg文本*/) {
            /** 计数 */
            let Cont = myStore.setElementCont(
              "svgTextCont",
              Number(myStore.getElementCont("svgTextCont")) + 1
            );
            /** 图元id */
            let pelId = "svgText" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "Svg文本_" + Cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "wrap" /*包*/) {
            /** 计数 */
            let Cont = myStore.setElementCont(
              "GroupCont",
              Number(myStore.getElementCont("GroupCont")) + 1
            );
            /** 图元id */
            let pelId = "wrap" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "图元包_" + Cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "divBlock" /*DIV块*/) {
            /** 计数 */
            let Cont = myStore.setElementCont(
              "divBlockCont",
              Number(myStore.getElementCont("divBlockCont")) + 1
            );
            /** 图元id */
            let pelId = "divBlock" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "DIV块_" + Cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "divText" /*DIV文本*/) {
            /** 计数 */
            let Cont = myStore.setElementCont(
              "divTextCont",
              Number(myStore.getElementCont("divTextCont")) + 1
            );
            /** 图元id */
            let pelId = "divText" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "DIV文本_" + Cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            pelInfo.parent = "none";
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
          if (PelType === "svgImage" /*svg图片*/) {
            /** 计数 */
            let Cont = myStore.setElementCont(
              "svgImageCont",
              Number(myStore.getElementCont("svgImageCont")) + 1
            );
            /** 图元id */
            let pelId = "svgImage" + myStore.getUUID();
            /** 图元名称*/
            let pelName = "svg图片_" + Cont;
            /** 图元参数 */
            let pelInfo = Copyitem;
            /** 设置图元参数_图元名称 */
            pelInfo.label = pelName;
            /** 设置图元参数_图元id */
            pelInfo.key = pelId;
            /** 设置图元参数_图元父id */
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
            pelInfo.parent = "none";
            /** 添加_图元数据 */
            myStore.pelSet.push(pelInfo);
          }
        }

        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        // 🐸 迭代-移动图元
        /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        try {
          /** 判断子数据 */
          let Children = Copyitem.children
          if (Children.length > 0) {
            onIterationPelCopy(Children, Key, OffSetX, OffSetY) // 迭代-复制图元
          }
        } catch (error) {

        }

      }
    }
  }

  d3.select("#DynamicShowPel").remove()   // 删除显示
  myStore.recordPoint = []            // 清理记录点
  myStore.setMenu("PelEditCopy", 0)
  myStore.workState = 0               // 清理-工作状态_无
  myStore.selectKeys = []              // 清理-选择键

  onUpdataHtml()                          // 更新标签
  onShowSelected()//选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 移动图元
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 迭代-移动图元
 * @参数_SvgData 视图数据
 * @参数_Key      查找id
 * @参数_OffSetX  偏移量X
 * @参数_OffSetY  偏移量Y
 */
const onIterationPelMove = (
  pelSet: any,
  Key: string,
  OffSetX: number,
  OffSetY: number
) => {
  // console.log("图元编辑-迭代-移动图元")
  /** ★ ★ 遍历-视图数据 */
  for (let index = 0; index < pelSet.length; index++) {
    /** 移动项 */
    const pelInfo = pelSet[index]
    if (pelInfo.key === Key) {
      /** ★ ★ 获取图元类型 */
      let PelType = pelInfo.type
      // console.log(`图元类型=${PelType}`)
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // ◆ ◆ 修改图元参数
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      if (PelType === "horizontaLine"/*水平线*/ ||
        PelType === "verticalLine"/*垂直线*/ ||
        PelType === "slantLine"/*斜线*/) {
        let x1 = Number(pelInfo.attrs.x1.val)
        let x2 = Number(pelInfo.attrs.x2.val)
        let y1 = Number(pelInfo.attrs.y1.val)
        let y2 = Number(pelInfo.attrs.y2.val)
        pelInfo.attrs.x1.val = x1 + OffSetX;
        pelInfo.attrs.x2.val = x2 + OffSetX;
        pelInfo.attrs.y1.val = y1 + OffSetY;
        pelInfo.attrs.y2.val = y2 + OffSetY;
      }
      if (PelType === "circle"/*圆*/ ||
        PelType === "ellipse"/*椭圆*/ ||
        PelType === "circlePolygon"/*圆分多边形*/) {
        let cx = Number(pelInfo.attrs.cx.val);// 圆心坐标CX 
        let cy = Number(pelInfo.attrs.cy.val);// 圆心坐标CY 
        pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
        pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
      }
      if (PelType === "arc"/*三点弧线*/) {
        let startX = Number(pelInfo.attrs.startX.val) // 起点坐标X
        let startY = Number(pelInfo.attrs.startY.val) // 起点坐标Y
        let endX = Number(pelInfo.attrs.endX.val) // 终点坐标X
        let endY = Number(pelInfo.attrs.endY.val) // 终点坐标Y
        let ctrlX = Number(pelInfo.attrs.ctrlX.val) // 控制点坐标X
        let ctrlY = Number(pelInfo.attrs.ctrlY.val) // 控制点坐标Y
        pelInfo.attrs.startX.val = startX + OffSetX;// 设置图元参数_起点坐标X
        pelInfo.attrs.startY.val = startY + OffSetY;// 设置图元参数_起点坐标Y
        pelInfo.attrs.endX.val = endX + OffSetX;    // 设置图元参数_终点坐标X
        pelInfo.attrs.endY.val = endY + OffSetY;    // 设置图元参数_终点坐标Y
        pelInfo.attrs.ctrlX.val = ctrlX + OffSetX;  // 设置图元参数_控制点坐标X
        pelInfo.attrs.ctrlY.val = ctrlY + OffSetY;  // 设置图元参数_控制点坐标Y

      }
      if (PelType === "polygon"/*多边形*/ ||
        PelType === "polyline"/*折线*/ ||
        PelType === "path"/*路径*/) {
        /** 转储-路径点*/
        let pathPoints = pelInfo.attrs.pathPoints.val
        /** 遍历更改-路径点参数*/
        pathPoints.forEach((item: any) => {
          item.x = item.x + OffSetX;
          item.y = item.y + OffSetY;
        });
        /** 设置图元参数_路径点*/
        pelInfo.attrs.pathPoints.val = pathPoints;
      }
      if (
        PelType === "rectangle"/*矩形*/ ||
        PelType === "divBlock"/*DIV块*/ ||
        PelType === "svgText"/*Svg文本*/ ||
        PelType === "divText"/*DIV文本*/ ||
        PelType === "wrap"/*包*/ ||
        PelType === "svgImage"
      ) {
        let left = Number(pelInfo.attrs.left.val); // 坐标X
        let top = Number(pelInfo.attrs.top.val);   // 坐标Y
        pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
        pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
      }
    }
    /** 判断子数据 */
    let Children = pelInfo.children
    /** 迭代-移动图元 */
    if (Children.length > 0) {
      onIterationPelMove(Children, Key, OffSetX, OffSetY) // 迭代-移动图元
    }
  }
}

/** 移动图元 */
export const onPelMove = () => {
  // console.log("图元编辑-移动处理器")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** ★ 计算偏移量 */
  let OffSetX = 0
  let OffSetY = 0
  OffSetX = myStore.recordPoint[1].x - myStore.recordPoint[0].x
  OffSetY = myStore.recordPoint[1].y - myStore.recordPoint[0].y

  // console.log(`OffSetX=${OffSetX};OffSetY=${OffSetY};`)
  /** ★ 判断-选择集长度 */
  if (selectKeys.length > 0) {
    //🚩 ★ ★ 遍历-选择集
    selectKeys.forEach((KeyItem: any) => {
      let Key = KeyItem
      // ———————————————————————————————————————————————————————————————| ★ ★ 遍历-视图数据
      pelSet.forEach((SvgDataItem: any) => {
        let pelInfo = SvgDataItem
        // —————————————————————————————————————————————————————————————| ★ ★ 判断键
        if (pelInfo.key === Key) {
          /** ★ ★ 获取图元类型 */
          let PelType = pelInfo.type
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          // ◆ ◆ 修改图元参数
          /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
          if (PelType === "horizontaLine"/*水平线*/ ||
            PelType === "verticalLine"/*垂直线*/ ||
            PelType === "slantLine"/*斜线*/) {
            let x1 = Number(pelInfo.attrs.x1.val)
            let x2 = Number(pelInfo.attrs.x2.val)
            let y1 = Number(pelInfo.attrs.y1.val)
            let y2 = Number(pelInfo.attrs.y2.val)
            pelInfo.attrs.x1.val = x1 + OffSetX;
            pelInfo.attrs.x2.val = x2 + OffSetX;
            pelInfo.attrs.y1.val = y1 + OffSetY;
            pelInfo.attrs.y2.val = y2 + OffSetY;
          }
          if (PelType === "circle"/*圆*/ ||
            PelType === "ellipse"/*椭圆*/ ||
            PelType === "circlePolygon"/*圆分多边形*/) {
            let cx = Number(pelInfo.attrs.cx.val);// 圆心坐标CX 
            let cy = Number(pelInfo.attrs.cy.val);// 圆心坐标CY 
            pelInfo.attrs.cx.val = cx + OffSetX;   // 设置图元参数_圆心坐标CX 
            pelInfo.attrs.cy.val = cy + OffSetY;   // 设置图元参数_圆心坐标CY 
          }
          if (PelType === "arc"/*三点弧线*/) {
            let startX = Number(pelInfo.attrs.startX.val) // 起点坐标X
            let startY = Number(pelInfo.attrs.startY.val) // 起点坐标Y
            let endX = Number(pelInfo.attrs.endX.val) // 终点坐标X
            let endY = Number(pelInfo.attrs.endY.val) // 终点坐标Y
            let ctrlX = Number(pelInfo.attrs.ctrlX.val) // 控制点坐标X
            let ctrlY = Number(pelInfo.attrs.ctrlY.val) // 控制点坐标Y
            pelInfo.attrs.startX.val = startX + OffSetX;// 设置图元参数_起点坐标X
            pelInfo.attrs.startY.val = startY + OffSetY;// 设置图元参数_起点坐标Y
            pelInfo.attrs.endX.val = endX + OffSetX;    // 设置图元参数_终点坐标X
            pelInfo.attrs.endY.val = endY + OffSetY;    // 设置图元参数_终点坐标Y
            pelInfo.attrs.ctrlX.val = ctrlX + OffSetX;  // 设置图元参数_控制点坐标X
            pelInfo.attrs.ctrlY.val = ctrlY + OffSetY;  // 设置图元参数_控制点坐标Y

          }
          if (PelType === "polygon"/*多边形*/ ||
            PelType === "polyline"/*折线*/ ||
            PelType === "path"/*路径*/) {
            /** 转储-路径点*/
            let pathPoints = pelInfo.attrs.pathPoints.val
            /** 遍历更改-路径点参数*/
            pathPoints.forEach((item: any) => {
              item.x = item.x + OffSetX;
              item.y = item.y + OffSetY;
            });
            /** 设置图元参数_路径点*/
            pelInfo.attrs.pathPoints.val = pathPoints;
          }
          if (
            PelType === "rectangle"/*矩形*/ ||
            PelType === "divBlock"/*DIV块*/ ||
            PelType === "svgText"/*Svg文本*/ ||
            PelType === "divText"/*DIV文本*/ ||
            PelType === "wrap"/*包*/ ||
            PelType === "svgImage"
          ) {
            let left = Number(pelInfo.attrs.left.val); // 坐标X
            let top = Number(pelInfo.attrs.top.val);   // 坐标Y
            pelInfo.attrs.left.val = left + OffSetX;   // 设置图元参数_坐标X
            pelInfo.attrs.top.val = top + OffSetY;     // 设置图元参数_坐标Y
          }
        }

      })
    })

  }

  /** ★ 更新-视图数据 */
  myStore.pelSet = pelSet
  d3.select("#DynamicShowPel").remove()   // 删除显示
  myStore.recordPoint = []            // 清理-工记录点
  myStore.setMenu("PelEditMove", 0)
  myStore.workState = 0               // 清理-工作状态_无
  myStore.selectKeys = []              // 清理-选择键
  onUpdataHtml()                          // 更新标签
  onShowSelected()//选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 删除图元
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 根据id删除图元
 * @参数_Attribute 属性
 * @参数_Key       id
 */
export const onPelDeleteByKey = (dataSet: any, Key: string) => {
  // console.log("图元编辑-根据id删除图元")
  // console.log(dataSet)

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历视图数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let index = 0; index < dataSet.length; index++) {
    /** 图元项 */
    let pelItem = dataSet[index]

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸  ★ 删除图元
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (String(pelItem.key) === Key) {
      // console.log("符合要求删除图元")
      dataSet.splice(index, 1)
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸  ★ 删除动画路径id
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    try {
      /** 动画路径id */
      let AnPathId = pelItem.animations.pathMove.path_id
      if (String(AnPathId) === Key) {
        pelItem.animations.pathMove.path_id = ''
      }
    } catch (error) { }


  }

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 迭代-遍历视图数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  try {
    if (dataSet.children.length > 0) {
      /** 迭代-根据键删除图元 */
      onPelDeleteByKey(dataSet.children, Key)
    }
  } catch (error) {
  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 删除空包 */
export const onDeleteNullWrap = () => {
  // console.log("图元编辑-删除空包")
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  pelSet.forEach((element: any) => {
    let Lang = 0
    try {
      Lang = element.children.length
    } catch (error) {
    }
    if (Lang === 0 && element.type === "wrap") {
      onPelDeleteByKey(element, element.key)
    }
  })
  // console.log(pelSet)
  myStore.pelSet = pelSet
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 删除图元 */
export const onPelDelete = () => {
  // console.log("图元编辑-删除图元")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  // console.log(selectKeys)

  /** ★ 判断选择 */
  if (selectKeys.length > 0) {
    myStore.hideDownNavigation("DownPelAttr") // 隐藏下框导航
    /** ★ 根据键删除图元 */
    for (let index = 0; index < selectKeys.length; index++) {
      const Key = selectKeys[index]
      onPelDeleteByKey(myStore.pelSet, Key)
    }
    myStore.selectedPel = {}// 清理-选择图元数据
  } else {
    message.error("未选择需要删除的图元")
  }
  /** ★ 删除空包 */
  onDeleteNullWrap()
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 对齐
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 左对齐 */
export const onPelAlignLeft = () => {
  // console.log("图元编辑-左对齐")

  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }

  //// console.log(selectKeys)
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** ★ 基点坐标 */
  let BaseCoordinatesX = 0
  /** 包含包 */
  let is_IncludeGroup = false

  /** ★ 遍历-选中的id；判断-选择集中是否包含包*/
  for (let index = 0; index < selectKeys.length; index++) {
    const FindKey = selectKeys[index]
    /** ★ 遍历-视图数据 */
    for (let indexB = 0; indexB < pelSet.length; indexB++) {
      const item = pelSet[indexB]
      if (item.key === FindKey && item.type === "Group") {
        is_IncludeGroup = true
        message.error("选择集中是否包含包")
        return
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★ 获取-选中BaseCoordinatesX的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index]
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /* ★ 遍历视图数据
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // console.log("遍历视图数据")
      pelSet.forEach((dataSet: any) => {
        /** 判断键相等 */
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(` ★ ★ 图元类型==${PelType}`)
          /** ★ ★ 水平线*/
          if (PelType === "horizontaLine"/*水平线*/) {
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)

            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向 */
            if (x2 < x1) {
              // console.log("◆ 判断方向-反向")
              Direction = false
            } else {
              // console.log("◆ 判断方向-正向")
            }

            /** ◆ ◆ 设置-基点坐标-正向 */
            if (Direction && index === 0) {
              BaseCoordinatesX = x1 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-反向 */
            if (!Direction && index === 0) {
              BaseCoordinatesX = x2 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-选中1个 */
            if (selectKeys.length === 1) {
              BaseCoordinatesX = 0 //基点坐标
            }

            /** ◆ 对齐到基点X */
            if (selectKeys.length != 1 && index != 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log("◆ ◆ 计算-线起点-正向-图元在基点的右边")
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log("◆ ◆ 计算-线终点-正向-图元在基点的左边")
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }

              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log("◆ ◆ 计算-线终点-反向-图元在基点的右边")
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log("◆ ◆ 计算-线终点-反向-图元在基点的左边")
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }

              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "verticalLine"/*垂直线*/) {
            /** ★ ★ 垂直线*/
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)

            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向 */
            if (x2 < x1) {
              // console.log("◆ 判断方向-反向")
              Direction = false
            } else {
              // console.log("◆ 判断方向-正向")
            }

            /** ◆ ◆ 设置-基点坐标-正向 */
            if (Direction && index === 0) {
              BaseCoordinatesX = x1 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-反向 */
            if (!Direction && index === 0) {
              BaseCoordinatesX = x2 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-选中1个 */
            if (selectKeys.length === 1) {
              BaseCoordinatesX = 0 //基点坐标
            }
            /** ◆ 对齐到基点X */
            if (selectKeys.length != 1 && index != 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log('◆ ◆ 计算-线起点-正向-图元在基点的右边')
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log('◆ ◆ 计算-线终点-正向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }
              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的右边')
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }
              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "slantLine"/*斜线*/) {
            /** ★ ★ 斜线*/
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)

            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向 */
            if (x2 < x1) {
              // console.log("◆ 判断方向-反向")
              Direction = false
            } else {
              // console.log("◆ 判断方向-正向")
            }

            /** ◆ ◆ 设置-基点坐标-正向 */
            if (Direction && index === 0) {
              BaseCoordinatesX = x1 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-反向 */
            if (!Direction && index === 0) {
              BaseCoordinatesX = x2 //基点坐标
            }
            /** ◆ ◆ 设置-基点坐标-选中1个 */
            if (selectKeys.length === 1) {
              BaseCoordinatesX = 0 //基点坐标
            }

            /** ◆ 对齐到基点X */
            if (selectKeys.length != 1 && index != 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log('◆ ◆ 计算-线起点-正向-图元在基点的右边')
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log('◆ ◆ 计算-线终点-正向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }

              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的右边')
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x1)
                new_x2 = x2 + (BaseCoordinatesX - x1)
              }

              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "circle"/*圆*/) {
            /** ★ ★ 圆*/
            /** 设置参考坐标X */
            if (selectKeys.length !== 0 && index === 0) {
              let r = Number(dataSet.attrs.radius.val)
              let cx = Number(dataSet.attrs.cx.val)
              BaseCoordinatesX = cx - r
              // console.log(BaseCoordinatesX)
            } else {
              let r = Number(dataSet.attrs.radius.val)
              let newVal = BaseCoordinatesX + r
              dataSet.attrs.cx.val = newVal
            }
          } else if (PelType === "ellipse"/*椭圆*/) {
            /** ★ ★ 椭圆*/
            /** 设置参考坐标X */
            if (selectKeys.length != 0 && index === 0) {
              let r = Number(dataSet.attrs.radius.val)
              let cx = Number(dataSet.attrs.cx.val)
              BaseCoordinatesX = cx - r
            } else {

            }
          } else if (PelType === "circlePolygon"/*圆分多边形*/) {

          } else if (PelType === "rectangle"/*矩形*/) {
            /** ★ ★ 矩形*/
            /** 设置参考坐标X */
            if (selectKeys.length !== 0 && index === 0) {
              let x = Number(dataSet.attrs.left.val)
              BaseCoordinatesX = x
            } else {
              dataSet.attrs.left.val = BaseCoordinatesX
            }
          } else if (PelType === "polygon"/*多边形*/) {

          } else if (PelType === "polyline"/*折线*/) {

          } else if (PelType === "path"/*路径*/) {

          } else if (
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/
          ) {
            let x = Number(dataSet.attrs.left.val)
            let y = Number(dataSet.attrs.top.val)
            let width = Number(dataSet.attrs.width.val)
            let height = Number(dataSet.attrs.height.val)
            let new_x = x - width / 2
            dataSet.attrs.left.val = new_x

          }
        }
      })
    }

    myStore.pelSet = pelSet
    onUpdataHtml()
  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 右对齐 */
export const onPelAlignRight = () => {
  // console.log("图元编辑-右对齐")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }

  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** 画布宽度 */
  let canvasWidth = Number(myStore.canvasAttr.canvasWidth);
  /** 画布高度 */
  let canvasHeight = Number(myStore.canvasAttr.canvasHeight);
  /** ★ 基点坐标 */
  let BaseCoordinatesX = Number(canvasWidth)

  /** 包含包 */
  let is_IncludeGroup = false
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index]
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const item = pelSet[indexB]
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true
          message.error("选择集中是否包含包")
          return
        }
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★获取-选中的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index]
      pelSet.forEach((dataSet: any) => {
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(`图元类型==${PelType}`)
          /** ★ ★ 水平线*/
          if (PelType === "horizontaLine"/*水平线*/) {
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)
            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向-选取右边边的坐标 */
            if (x2 < x1) {
              // console.log('◆ 设置参考坐标X-反向')
              Direction = false
            }
            /** ◆ 设置参考坐标X */
            if (index === 0) {
              /** ◆ ◆ 判断方向-正向 */
              if (Direction) {
                BaseCoordinatesX = x2 //基点坐标
              }
              /** ◆ ◆ 判断方向-反向 */
              if (!Direction) {
                BaseCoordinatesX = x1 //基点坐标
              }
            }
            /** ◆ 对齐到基点X */
            if (index > 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log('◆ ◆ 计算-线起点-正向-图元在基点的右边')
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log('◆ ◆ 计算-线终点-正向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的右边')
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "verticalLine"/*垂直线*/) {
            /** ★ ★ 垂直线*/
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)
            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向-选取右边边的坐标 */
            if (x2 < x1) {
              // console.log('◆ 设置参考坐标X-反向')
              Direction = false
            }
            /** ◆ 设置参考坐标X */
            if (index === 0) {
              BaseCoordinatesX = x1 //基点坐标
            }
            /** ◆ 对齐到基点X */
            if (index > 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log('◆ ◆ 计算-线起点-正向-图元在基点的右边')
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log('◆ ◆ 计算-线终点-正向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的右边')
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "slantLine"/*斜线*/) {
            /** ★ ★ 斜线*/
            /** ◆ 线起点 */
            let x1 = Number(dataSet.attrs.x1.val)
            /** ◆ 线终点 */
            let x2 = Number(dataSet.attrs.x2.val)

            /** ◆ 方向 */
            let Direction = true
            /** ◆ 判断方向-选取右边边的坐标 */
            if (x2 < x1) {
              // console.log('◆ 设置参考坐标X-反向')
              Direction = false
            }
            /** ◆ 设置参考坐标X */
            if (index === 0) {
              /** ◆ ◆ 判断方向-正向 */
              if (Direction) {
                BaseCoordinatesX = x1 //基点坐标
              }
              /** ◆ ◆ 判断方向-反向 */
              if (!Direction) {
                BaseCoordinatesX = x2 //基点坐标
              }
            }
            /** ◆ 对齐到基点X */
            if (index > 0) {
              let new_x1 = 0
              let new_x2 = 0
              /** ◆ ◆ 计算-线起点-正向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && Direction) {
                // console.log('◆ ◆ 计算-线起点-正向-图元在基点的右边')
                new_x1 = x1 - (x2 - BaseCoordinatesX)
                new_x2 = x2 - (x2 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-正向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && Direction) {
                // console.log('◆ ◆ 计算-线终点-正向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 计算-线起点-反向-图元在基点的右边 */
              if (BaseCoordinatesX < x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的右边')
                new_x1 = x1 - (x1 - BaseCoordinatesX)
                new_x2 = x2 - (x1 - BaseCoordinatesX)
              }
              /** ◆ ◆ 计算-线终点-反向-图元在基点的左边 */
              if (BaseCoordinatesX > x1 && !Direction) {
                // console.log('◆ ◆ 计算-线终点-反向-图元在基点的左边')
                new_x1 = x1 + (BaseCoordinatesX - x2)
                new_x2 = x2 + (BaseCoordinatesX - x2)
              }
              /** ◆ ◆ 更新参数-线起点 */
              dataSet.attrs.x1.val = new_x1
              /** ◆ ◆ 更新参数-线终点 */
              dataSet.attrs.x2.val = new_x2
            }
          } else if (PelType === "circle"/*圆*/) {
            /** ★ ★ 圆*/
            /** 设置参考坐标X */
            if (index === 0) {
              let r = Number(dataSet.attrs.radius.val)
              let cx = Number(dataSet.attrs.cx.val)
              BaseCoordinatesX = cx + r
            } else {
              let r = Number(dataSet.attrs.radius.val)
              let newVal = BaseCoordinatesX - r
              dataSet.attrs.cx.val = newVal
            }
          } else if (PelType === "ellipse"/*椭圆*/) {
            /** ★ ★ 椭圆*/
          } else if (PelType === "circlePolygon"/*圆分多边形*/) {

          } else if (PelType === "rectangle"/*矩形*/) {
            if (selectKeys.length !== 0 && index === 0) {
              let left = Number(dataSet.attrs.left.val)
              let width = Number(dataSet.attrs.width.val)
              BaseCoordinatesX = left + width
            } else {
              let width = Number(dataSet.attrs.width.val)
              dataSet.attrs.left.val = BaseCoordinatesX - width
            }
          } else if (PelType === "polygon"/*多边形*/) {

          } else if (PelType === "polyline"/*折线*/) {

          } else if (PelType === "path"/*路径*/) {

          } else if (
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/
          ) {
          }
        }
      })
    }
    myStore.pelSet = pelSet

  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 上对齐 */
export const onPelAlignUp = () => {
  // console.log("图元编辑-上对齐")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }

  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))

  /** ★ 基点坐标 */
  let BaseCoordinatesY = 0

  /** 包含包 */
  let is_IncludeGroup = false
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index]
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const item = pelSet[indexB]
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true
          message.error("选择集中是否包含包")
          return
        }
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★获取-选中的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index]
      pelSet.forEach((dataSet: any) => {
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(`图元类型==${PelType}`)
          /** ★ ★ 水平线*/
          if (PelType === "horizontaLine"/*水平线*/) {
          } else if (PelType === "verticalLine"/*垂直线*/) {

          } else if (PelType === "slantLine"/*斜线*/) {

          } else if (PelType === "circle"/*圆*/) {
            if (index === 0) {
              let r = Number(dataSet.attrs.radius.val)
              let cy = Number(dataSet.attrs.cy.val)
              BaseCoordinatesY = cy - r
            } else {
              let r = Number(dataSet.attrs.radius.val)
              let newVal = BaseCoordinatesY + r
              dataSet.attrs.cy.val = newVal
            }
          } else if (PelType === "ellipse"/*椭圆*/) {

          } else if (PelType === "circlePolygon"/*圆分多边形*/) {

          } else if (PelType === "rectangle"/*多边形*/) {

          } else if (PelType === "polygon"/*多边形*/) {

          } else if (PelType === "polyline"/*折线*/) {

          } else if (PelType === "path"/*路径*/) {

          } else if (
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/
          ) {
          }
        }
      })
    }

    myStore.pelSet = pelSet

  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 下对齐 */
export const onPelAlignDown = () => {
  // console.log("图元编辑-下对齐")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }
  // console.log(selectKeys)
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** ★ 获取画布尺寸 */
  let canvasHeight = 0
  /** ★ 基点坐标 */
  let BaseCoordinatesY = Number(canvasHeight)

  /** 包含包 */
  let is_IncludeGroup = false
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index]
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const item = pelSet[indexB]
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true
          message.error("选择集中是否包含包")
          return
        }
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★获取-选中的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index]
      pelSet.forEach((dataSet: any) => {
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(`图元类型==${PelType}`)
          /** ★ ★ 水平线*/
          if (PelType === "horizontaLine"/*水平线*/) {
          } else if (PelType === "verticalLine"/*垂直线*/) {

          } else if (PelType === "slantLine"/*斜线*/) {

          } else if (PelType === "circle"/*圆*/) {
            /** ★ ★ 圆*/
            /** 设置参考坐标X */
            if (index === 0) {
              let r = Number(dataSet.attrs.r.val)
              let cy = Number(dataSet.attrs.cy.val)
              BaseCoordinatesY = cy + r
            } else {
              let r = Number(dataSet.attrs.radius.val)
              let newVal = BaseCoordinatesY - r

            }
          } else if (PelType === "ellipse"/*椭圆*/) {

          } else if (PelType === "circlePolygon"/*圆分多边形*/) {
            /** ★ ★ 圆分多边形*/
          } else if (PelType === "rectangle"/*矩形*/) {
            /** ★ ★ 矩形*/
          } else if (PelType === "polygon"/*多边形*/) {
            /** ★ ★ 多边形*/
          } else if (PelType === "polyline"/*折线*/) {
            /** ★ ★ 折线*/
          } else if (PelType === "path"/*路径*/) {
            /** ★ ★ 路径*/
          } else if (
            /** ★ ★ DIV文本 图片*/
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/
          ) {
          }
        }
      })
    }

    myStore.pelSet = pelSet

  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 水平居中 */
export const onPelAlignHorizontal = () => {
  // console.log("图元编辑-水平居中")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }
  // console.log(selectKeys)
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** 画布宽度 */
  let canvasWidth = Number(myStore.canvasAttr.canvasWidth);
  /** 画布高度 */
  let canvasHeight = Number(myStore.canvasAttr.canvasHeight);
  /** ★ 基点坐标 */
  let BaseCoordinatesX = canvasWidth / 2
  /** 包含包 */
  let is_IncludeGroup = false
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index];
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const item = pelSet[indexB]
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true
          message.error("选择集中是否包含包")
          return
        }
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★获取-选中的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index]
      pelSet.forEach((dataSet: any) => {
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(`图元类型==${PelType}`)
          if (PelType === "horizontaLine"/*水平线*/ ||
            PelType === "verticalLine"/*垂直线*/ ||
            PelType === "slantLine"/*斜线*/
          ) {
          }
          if (PelType === "circle"/*圆*/ ||
            PelType === "ellipse"/*椭圆*/ ||
            PelType === "circlePolygon"/*圆分多边形*/) {

          }
          if (PelType === "arc"/*三点弧线*/) { }
          if (PelType === "rectangle"/*矩形*/) {
            let width = Number(dataSet.attrs.width.val)

          }
          if (PelType === "divBlock"/*DIV块*/) {

          }
          if (
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/
          ) {
          }
        }
      })
    }
    myStore.pelSet = pelSet
  }
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 绝对居中 */
export const onPelAlignCenter = () => {
  // console.log("图元编辑-绝对居中")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse()
  } else {
    return
  }
  /** ★ 转储-视图数据 */
  let CopySvgDataSet = JSON.parse(JSON.stringify(myStore.pelSet))
  /** 包含包 */
  let is_IncludeGroup = false
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index]
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < CopySvgDataSet.length; indexB++) {
        const item = CopySvgDataSet[indexB]
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true
          message.error("选择集中是否包含包")
          return
        }
      }
    }
  }
  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** 画布宽度 */
    let CanvasX = Number(myStore.canvasAttr.canvasWidth) / 2
    /** 画布高度 */
    let CanvasY = Number(myStore.canvasAttr.canvasHeight) / 2
    /** 获取-选中的-修改 */
    //🚩 ★ 遍历选择键
    // console.log("遍历选择键")
    selectKeys.forEach((KeyItem: any) => {
      let Key = KeyItem
      // ———————————————————————————————————————————————————————————————| ★ ★ 遍历视图数据
      // console.log("遍历视图数据")
      CopySvgDataSet.forEach((dataSet: any) => {
        // console.log(dataSet)
        if (dataSet.key === Key) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type
          // console.log(`图元类型==${PelType}`)

          if (PelType === "horizontaLine"/*水平线*/ ||
            PelType === "verticalLine"/*垂直线*/ ||
            PelType === "slantLine"/*斜线*/) {
            let x1 = Number(dataSet.attrs.x1.val)
            let x2 = Number(dataSet.attrs.x2.val)
            let centerX = (x2 + x1) / 2
            // console.log(`centerX==${centerX};centerY==${centerX}`)
            let new_x1 = x1 + (CanvasX - centerX)
            let new_x2 = x2 + (CanvasX - centerX)
            dataSet.attrs.x1.val = new_x1
            dataSet.attrs.x2.val = new_x2

            let y1 = Number(dataSet.attrs.y1.val)
            let y2 = Number(dataSet.attrs.y2.val)
            let centerY = (y2 + y1) / 2
            let new_y1 = y1 + (CanvasY - centerY)
            let new_y2 = y2 + (CanvasY - centerY)
            dataSet.attrs.y1.val = new_y1
            dataSet.attrs.y2.val = new_y2
          }
          if (PelType === "circle"/*圆*/ ||
            PelType === "ellipse"/*椭圆*/ ||
            PelType === "circlePolygon"/*圆分多边形*/) {
            // console.log("选择-" + dataSet.label)
            dataSet.attrs.cx.val = CanvasX
            dataSet.attrs.cy.val = CanvasY
          }
          if (PelType === "rectangle"/*矩形*/) {
            let width = Number(dataSet.attrs.width.val)
            let height = Number(dataSet.attrs.height.val)
            let new_x = CanvasX - width / 2
            let new_y = CanvasY - height / 2
            dataSet.attrs.left.val = new_x
            dataSet.attrs.top.val = new_y
          }
          if (PelType === "polygon"/*多边形*/ ||
            PelType === "polyline"/*折线*/ ||
            PelType === "path"/*路径*/) {
          }
          if (
            PelType === "svgText"/*Svg文本*/ ||
            PelType === "divText"/*DIV文本*/ ||
            PelType === "svgImage"/*图片*/ ||
            PelType === "divBlock"/*DIV块*/
          ) {
            let width = Number(dataSet.attrs.width.val)
            let height = Number(dataSet.attrs.height.val)
            let new_x = CanvasX - width / 2
            let new_y = CanvasY - height / 2
            dataSet.attrs.left.val = new_x
            dataSet.attrs.top.val = new_y
          }
        }
      })
    })

    myStore.pelSet = CopySvgDataSet
    myStore.selectKeys = []// 清空-选择的图元键
    onUpdataHtml()
  }
  onUpdataHtml()   // 更新标签
  onShowSelected() // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 垂直居中 */
export const onPelAlignVertical = () => {
  // console.log("图元编辑-垂直居中")
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys;
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse();
  } else {
    return
  }
  // console.log(selectKeys);
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet));
  /** 画布宽度 */
  let canvasWidth = Number(myStore.canvasAttr.canvasWidth);
  /** 画布高度 */
  let canvasHeight = Number(myStore.canvasAttr.canvasHeight);
  // console.log(`canvasHeight==${canvasHeight}`);
  /** ★ 基点坐标 */
  let BaseCoordinatesY = canvasHeight / 2;
  /** 包含包 */
  let is_IncludeGroup = false;
  /** ★ 判断-选择集中是否包含包 */
  if (selectKeys.length > 1) {
    /** ★ 遍历-选中的id */
    for (let index = 0; index < selectKeys.length; index++) {
      const FindKey = selectKeys[index];
      /** ★ 遍历-视图数据 */
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const item = pelSet[indexB];
        if (item.key === FindKey && item.type === "Group") {
          is_IncludeGroup = true;
          message.error("选择集中是否包含包");
          return;
        }
      }
    }
  }

  /** ★ 判断-选择集中-不包含包 */
  if (!is_IncludeGroup) {
    /** ★获取-选中的-修改 */
    for (let index = 0; index < selectKeys.length; index++) {
      const element = selectKeys[index];
      for (let indexB = 0; indexB < pelSet.length; indexB++) {
        const dataSet = pelSet[indexB];
        if (dataSet.key === element) {
          /** ★ ★ 获取-图元类型 */
          let PelType = dataSet.type;
          // console.log(`图元类型==${PelType}`);
          if (PelType === "horizontaLine"/*水平线*/ ||
            PelType === "verticalLine"/*垂直线*/ ||
            PelType === "slantLine"/*斜线*/
          ) {
          }
          if (PelType === "circle"/*圆*/ ||
            PelType === "ellipse"/*椭圆*/ ||
            PelType === "circlePolygon"/*圆分多边形*/) {

          }
          if (PelType === "arc"/*三点弧线*/) { }
          if (PelType === "rectangle"/*矩形*/) {
            let height = Number(dataSet.attrs.height.val);

          }
          if (PelType === "divBlock"/*DIV块*/) {

          }
        }
      }
    }
    myStore.pelSet = pelSet;

  }
}

/** 水平均分 */
export const onAveragePelHorizontal = () => {
  // console.log("图元编辑-水平均分");
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys;
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse();
  } else {
    return
  }
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet));
  /** 包含包 */
  let is_IncludeGroup = false;
  /** ★ 遍历-选中的id；判断-选择集中是否包含包*/
  for (let index = 0; index < selectKeys.length; index++) {
    const FindKey = selectKeys[index];
    /** ★ 遍历-视图数据 */
    for (let indexB = 0; indexB < pelSet.length; indexB++) {
      const item = pelSet[indexB];
      if (item.key === FindKey && item.type === "Group") {
        is_IncludeGroup = true;
        message.error("选择集中是否包含包");
        return;
      }
    }
  }
  if (is_IncludeGroup) {
    return;
  }
  /** ★ 开始点X坐标 */
  let StartX = 0;
  /** ★ 找出开始点Y坐标*/
  const FindStartKey = selectKeys[0];
  // console.log(`FindStartKey==${FindStartKey}`);
  /** 遍历视图数据 */
  pelSet.forEach((dataSet: any) => {
    /** 判断键相等 */
    if (dataSet.key === FindStartKey) {
      let PelType = dataSet.type;//图元类型 
      /** ★ ★ 水平线*/
      if (PelType === "horizontaLine"/*水平线*/ ||
        PelType === "verticalLine"/*垂直线*/ ||
        PelType === "slantLine"/*斜线*/
      ) {
        let StartPoint = {
          x: Number(dataSet.x1.val),//线起点,
          y: Number(dataSet.y1.val) //线起点
        }
        let EndPoint = {
          x: Number(dataSet.x2.val),//线起点,
          y: Number(dataSet.y2.val) //线起点
        }
        let LineMiddle = onGetLineMiddle(StartPoint, EndPoint);//获取线-中点
        StartX = LineMiddle.x;
      }
      if (PelType === "circle"/*圆*/ ||
        PelType === "ellipse"/*椭圆*/ ||
        PelType === "circlePolygon"/*圆分多边形*/) {
        StartX = Number(dataSet.attrs.cx.val);
      }
      if (PelType === "arc"/*三点弧线*/) {
        StartX = Number(dataSet.attrs.ctrlX.val);
      }
      if (PelType === "rectangle"/*矩形*/) {
        let Y = Number(dataSet.attrs.left.val);
        let width = Number(dataSet.attrs.width.val);
        StartX = Y + width / 2;
      }
      if (PelType === "divBlock"/*DIV块*/) {

      }
      if (
        PelType === "divText"/*DIV文本*/ ||
        PelType === "svgImage"/*图片*/
      ) {
        StartX = Number(dataSet.attrs.left.val);
      }
    }
  });
  // console.log(`StartX==${StartX}`);

  /** ★ 结束点X坐标 */
  let EndX = 0;
  /** ★ 找出结束点Y坐标*/
  const FindEndKey = selectKeys[selectKeys.length - 1];
  // console.log(`FindEndKey==${FindEndKey}`);
  /** 遍历视图数据 */
  pelSet.forEach((dataSet: any) => {
    /** 判断键相等 */
    if (dataSet.key === FindEndKey) {
      let PelType = dataSet.type;//图元类型 
      /** ★ ★ 水平线*/
      if (PelType === "horizontaLine"/*水平线*/ ||
        PelType === "verticalLine"/*垂直线*/ ||
        PelType === "slantLine"/*斜线*/
      ) {
        let StartPoint = {
          x: Number(dataSet.x1.val),//线起点,
          y: Number(dataSet.y1.val) //线起点
        }
        let EndPoint = {
          x: Number(dataSet.x2.val),//线起点,
          y: Number(dataSet.y2.val) //线起点
        }
        let LineMiddle = onGetLineMiddle(StartPoint, EndPoint);//获取线-中点
        EndX = LineMiddle.x;
      }
      if (PelType === "circle"/*圆*/ ||
        PelType === "ellipse"/*椭圆*/ ||
        PelType === "circlePolygon"/*圆分多边形*/) {
        EndX = Number(dataSet.attrs.cx.val);
      }
      if (PelType === "arc"/*三点弧线*/) {
        EndX = Number(dataSet.attrs.ctrlX.val);
      }
      if (PelType === "rectangle"/*矩形*/) {
        let Y = Number(dataSet.attrs.left.val);
        let width = Number(dataSet.attrs.width.val);
        EndX = Y + width / 2;
      }
      if (PelType === "divBlock"/*DIV块*/) {
        EndX = Number(dataSet.attrs.left.val);
      }
      if (
        PelType === "divText"/*DIV文本*/ ||
        PelType === "svgImage"/*图片*/
      ) {
        EndX = Number(dataSet.attrs.left.val);
      }
    }
  });
  // console.log(`EndX==${EndX}`);

  /** ★ 间距 */
  let Spacing = Math.abs(EndX - StartX) / (selectKeys.length - 1);
  // console.log(`Spacing==${Spacing}`);
  /** ★ 截取查找键 */
  let NewFindKey: any = [];
  for (let index = 1; index < selectKeys.length - 1; index++) {
    const element = selectKeys[index];
    NewFindKey.push(element);
  }
  // console.log(`NewFindKey==${NewFindKey}`);
  /** ★ 更改数据 */
  for (let index = 0; index < NewFindKey.length; index++) {
    let KeyItem = String(NewFindKey[index]);
    let NewSpacing = (index + 1) * Spacing;
    /** 遍历视图数据 */
    pelSet.forEach((dataSet: any) => {
      /** 判断键相等 */
      if (dataSet.key === KeyItem) {
        let PelType = dataSet.type;//图元类型 
        if (PelType === "horizontaLine"/*水平线*/ ||
          PelType === "verticalLine"/*垂直线*/ ||
          PelType === "slantLine"/*斜线*/
        ) {
          let x1 = Number(dataSet.attrs.x1.val);//线起点
          let x2 = Number(dataSet.attrs.x2.val);//线终点 
          let new_x1 = Number(NewSpacing - x1);
          let new_x2 = Number(NewSpacing + x2);

        }
        if (PelType === "circle"/*圆*/ ||
          PelType === "ellipse"/*椭圆*/ ||
          PelType === "circlePolygon"/*圆分多边形*/) {

        }
        if (PelType === "arc"/*三点弧线*/) {
        }
        if (PelType === "rectangle"/*矩形*/) {
          let width = Number(dataSet.attrs.width.val);

        }
        if (PelType === "divBlock"/*DIV块*/) {

        }
        if (
          PelType === "divText"/*DIV文本*/ ||
          PelType === "svgImage"/*图片*/
        ) {

        }
      }
    });
  }
  myStore.pelSet = pelSet;
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 垂直均分 */
export const onAveragePelVertical = () => {
  // console.log("图元编辑-垂直均分");
  /** ★ 选中的id */
  let selectKeys = myStore.selectKeys;
  if (selectKeys.length > 0) {
    /** ★ 翻转排序 */
    selectKeys = selectKeys.reverse();
  } else {
    return
  }
  /** ★ 转储-视图数据 */
  let pelSet = JSON.parse(JSON.stringify(myStore.pelSet));
  /** 包含包 */
  let is_IncludeGroup = false;
  /** ★ 遍历-选中的id；判断-选择集中是否包含包*/
  for (let index = 0; index < selectKeys.length; index++) {
    const FindKey = selectKeys[index];
    /** ★ 遍历-视图数据 */
    for (let indexB = 0; indexB < pelSet.length; indexB++) {
      const item = pelSet[indexB];
      if (item.key === FindKey && item.type === "Group") {
        is_IncludeGroup = true;
        message.error("选择集中是否包含包");
        return;
      }
    }
  }
  if (is_IncludeGroup) {
    return;
  }
  /** ★ 开始点Y坐标 */
  let StartY = 0;
  /** ★ 找出开始点Y坐标*/
  const FindStartKey = selectKeys[0];
  // console.log(`FindStartKey==${FindStartKey}`);
  /** 遍历视图数据 */
  pelSet.forEach((dataSet: any) => {
    /** 判断键相等 */
    if (dataSet.key === FindStartKey) {
      let PelType = dataSet.type;//图元类型 
      /** ★ ★ 水平线*/
      if (PelType === "horizontaLine"/*水平线*/ ||
        PelType === "verticalLine"/*垂直线*/ ||
        PelType === "slantLine"/*斜线*/
      ) {
        let StartPoint = {
          x: Number(dataSet.x1.val),//线起点,
          y: Number(dataSet.y1.val) //线起点
        }
        let EndPoint = {
          x: Number(dataSet.x2.val),//线起点,
          y: Number(dataSet.y2.val) //线起点
        }
        let LineMiddle = onGetLineMiddle(StartPoint, EndPoint);//获取线-中点
        StartY = LineMiddle.y;
      }
      if (PelType === "circle"/*圆*/ ||
        PelType === "ellipse"/*椭圆*/ ||
        PelType === "circlePolygon"/*圆分多边形*/) {
        StartY = Number(dataSet.attrs.cy.val);
      }
      if (PelType === "arc"/*三点弧线*/) {
        StartY = Number(dataSet.attrs.ctrlY.val);
      }
      if (PelType === "rectangle"/*矩形*/) {
        let Y = Number(dataSet.attrs.top.val);
        let height = Number(dataSet.attrs.height.val);
        StartY = Y + height / 2;
      }
      if (PelType === "divBlock"/*DIV块*/) {
        StartY = Number(dataSet.attrs.top.val);
      }
      if (
        PelType === "divText"/*DIV文本*/ ||
        PelType === "svgImage"/*图片*/
      ) {
        StartY = Number(dataSet.attrs.top.val);
      }
    }
  });
  // console.log(`StartY==${StartY}`);
  /** ★ 结束点Y坐标 */
  let EndY = 0;
  /** ★ 找出结束点Y坐标*/
  const FindEndKey = selectKeys[selectKeys.length - 1];
  // console.log(`FindEndKey==${FindEndKey}`);
  /** 遍历视图数据 */
  pelSet.forEach((dataSet: any) => {
    /** 判断键相等 */
    if (dataSet.key === FindEndKey) {
      let PelType = dataSet.type;//图元类型 
      /** ★ ★ 水平线*/
      if (PelType === "horizontaLine"/*水平线*/ ||
        PelType === "verticalLine"/*垂直线*/ ||
        PelType === "slantLine"/*斜线*/
      ) {
        let StartPoint = {
          x: Number(dataSet.x1.val),//线起点,
          y: Number(dataSet.y1.val) //线起点
        }
        let EndPoint = {
          x: Number(dataSet.x2.val),//线起点,
          y: Number(dataSet.y2.val) //线起点
        }
        let LineMiddle = onGetLineMiddle(StartPoint, EndPoint);//获取线-中点
        EndY = LineMiddle.y;
      }
      if (PelType === "circle"/*圆*/ ||
        PelType === "ellipse"/*椭圆*/ ||
        PelType === "circlePolygon"/*圆分多边形*/ ||
        PelType === "Pentagon"/*五角形*/ ||
        PelType === "Hexagon"/*六角形*/ ||
        PelType === "Octagon"/*八角形*/) {
        EndY = Number(dataSet.attrs.cy.val);
      }
      if (PelType === "arc"/*三点弧线*/) {
        EndY = Number(dataSet.attrs.ctrlY.val);
      }
      if (PelType === "rectangle"/*矩形*/) {
        let Y = Number(dataSet.attrs.top.val);
        let height = Number(dataSet.attrs.height.val);
        EndY = Y + height / 2;
      }
      if (PelType === "divBlock"/*DIV块*/) {
        EndY = Number(dataSet.attrs.top.val);
      }
      if (
        PelType === "divText"/*DIV文本*/ ||
        PelType === "svgImage"/*图片*/
      ) {
        EndY = Number(dataSet.attrs.top.val);
      }
    }
  });
  // console.log(`EndY==${EndY}`);

  /** ★ 间距 */
  let Spacing = Math.abs(EndY - StartY) / (selectKeys.length - 1);
  // console.log(`Spacing==${Spacing}`);
  /** ★ 截取查找键 */
  let NewFindKey: any = [];
  for (let index = 1; index < selectKeys.length - 1; index++) {
    const element = selectKeys[index];
    NewFindKey.push(element);
  }
  // console.log(`NewFindKey==${NewFindKey}`);
  /** ★ 更改数据 */
  for (let index = 0; index < NewFindKey.length; index++) {
    let KeyItem = String(NewFindKey[index]);
    let NewSpacing = (index + 1) * Spacing;
    /** 遍历视图数据 */
    pelSet.forEach((dataSet: any) => {
      /** 判断键相等 */
      if (dataSet.key === KeyItem) {
        let PelType = dataSet.type;//图元类型 
        /** ★ ★ 水平线*/
        if (PelType === "horizontaLine"/*水平线*/ ||
          PelType === "verticalLine"/*垂直线*/ ||
          PelType === "slantLine"/*斜线*/
        ) {
          let y1 = Number(dataSet.attrs.y1.val);//线起点
          let y2 = Number(dataSet.attrs.y2.val);//线终点 
          let new_y1 = Number(NewSpacing - y1);
          let new_y2 = Number(NewSpacing + y2);

        }
        if (PelType === "circle"/*圆*/ ||
          PelType === "ellipse"/*椭圆*/ ||
          PelType === "circlePolygon"/*圆分多边形*/) {

        }
        if (PelType === "arc"/*三点弧线*/) {

        }
        if (PelType === "rectangle"/*矩形*/) {
          let height = Number(dataSet.attrs.height.val);

        }
        if (PelType === "divBlock"/*DIV块*/) {

        }
        if (
          PelType === "divText"/*DIV文本*/ ||
          PelType === "svgImage"/*图片*/
        ) {

        }
      }
    });
  }

  myStore.pelSet = pelSet;
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 打断 */
export const onLineInterrupt = () => {
  // console.log("图元编辑-打断")
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 延伸 */
export const onLineExtend = () => {
  // console.log("图元编辑-延伸")
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/** 圆角 */
export const onLineFillet = () => {
  // console.log("图元编辑-圆角");
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
};

/** 倒角 */
export const onLineChamfer = () => {
  // console.log("图元编辑-倒角");
  myStore.selectKeys = [] // 清理选择键
  onUpdataHtml()              // 更新标签
  onShowSelected()            // 选中显示
  myStore.selectToggle = !myStore.selectToggle// 触发-选择切换
}

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 添加-渐变
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 填充图案生成器
 * @参数_fillPattern   填充图案
 * @参数_fillColor      填充颜色
 * @参数_fillId        填充Id
 * @参数_fillSize      填充尺寸
 * @参数_fillRatio     填充比例
 * @返回_filldefs      填充定义
 */
export const onPatternGenerator = (fillPattern: number, fillColor: string, fillId: string, fillSize: number, fillRatio: number) => {
  // console.log("✍ 图元编辑-填充图案生成器");
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* ★ 点
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (fillPattern === 1) {
    // 填充标签
    let filldefs = `<defs><pattern id='${fillId}' x='0' y='0' patternUnits='objectBoundingBox' width='${fillRatio}%' height='${fillRatio}%'><path d="M 0 0 v 1" style='stroke: ${fillColor}; stroke-width: ${fillSize};fill: none'></path></pattern></defs>`
    return filldefs
  }
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* ★ 方格
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (fillPattern === 2) {
    // 填充标签
    let filldefs = `<defs><pattern id='${fillId}' x='0' y='0' patternUnits='objectBoundingBox' width='${fillRatio}%' height='${fillRatio}%'><path d='M 0 0 h ${fillSize} v ${fillSize} h -${fillSize} z' style='stroke: ${fillColor}; fill: none'></path></pattern></defs>`
    return filldefs
  }
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* ★ 长方格
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (fillPattern === 3) {
    // 填充标签
    let filldefs = `<defs><pattern id='${fillId}' x='0' y='0' patternUnits='objectBoundingBox' width='${fillRatio}%' height='${fillRatio}%'><path d='M 0 0 h ${fillSize * 2} v ${fillSize / 2} h -${fillSize * 2} z' style='stroke: ${fillColor}; fill: none'></path></pattern></defs>`
    return filldefs
  }
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* ★ 水平线
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (fillPattern === 4) {
    // 填充标签
    let filldefs = `<defs><pattern id='${fillId}' x='0' y='0' patternUnits='objectBoundingBox' width='${fillRatio}%' height='${fillRatio}%'><path d='M 0 0 h ${fillSize}' style='stroke: ${fillColor}; fill: none'></path></pattern></defs>`
    return filldefs
  }
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /* ★ 垂直线
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  if (fillPattern === 6) {
    // 填充标签
    let filldefs = `<defs><pattern id='${fillId}' x='0' y='0' patternUnits='objectBoundingBox' width='${fillRatio}%' height='${fillRatio}%'><path d='M 0 0 v ${fillSize}' style='stroke: ${fillColor}; fill: none'></path></pattern></defs>`
    return filldefs
  }
}



